

      $(document).ready( function() {
      
        var KEY_CODE = {};
          KEY_CODE.SPACE = 32;
          KEY_CODE.ENTER = 13;
          KEY_CODE.LEFT = 37;
          KEY_CODE.RIGHT = 39;
	  KEY_CODE.UP = 38;
	  KEY_CODE.DOWN = 40;
	  KEY_CODE.PAGEUP = 33;
	  KEY_CODE.PAGEDOWN = 34;
	  KEY_CODE.HOME = 36;
	  KEY_CODE.END = 35;
      
        //in watts
        var switch2_watts = 193;
        var switch3_watts = 555;
        var switch4_watts = 753;
              
        var total_watts = 1501;
        
        //define the initial angles for switches
        var switch1_angle = 0;
        var switch2_angle = -35;
        var switch3_angle = -35;
        var switch4_angle = -35;

	var current_power_text = "Current power consumed: "

        //show power
        $("h2").text( current_power_text + total_watts + " watts");

       
        $("#switch1_svg").width(250).height(300);
        $("#switch1_svg").svg();
        $("#switch2_svg").width(280).height(220);
        $("#switch2_svg").svg();
        $("#switch3_svg").width(280).height(220);
        $("#switch3_svg").svg();
        $("#switch4_svg").width(280).height(220);
        $("#switch4_svg").svg();
      
        var switch1_wrapper = $("#switch1_svg").svg('get');
        $("#switch1_svg").attr("class", "switch");
        switch1_wrapper.load("SVG/switch.svg",
          {
          }
        );
        
        var switch2_wrapper = $("#switch2_svg").svg('get');
        $("#switch2_svg").attr("class", "switch");
        switch2_wrapper.load("SVG/switch.svg",
          {
          }
        );
        
        var switch3_wrapper = $("#switch3_svg").svg('get');
        $("#switch3_svg").attr("class", "switch");
         switch3_wrapper.load("SVG/switch.svg",
          {
          }
        );
        
        var switch4_wrapper = $("#switch4_svg").svg('get');
        $("#switch4_svg").attr("class", "switch");
        switch4_wrapper.load("SVG/switch.svg",
          {
            onLoad: onLoad
          }
        );       
 
        
        $("#meter_svg").width(300).height(300);
        $("#meter_svg").svg();
        var meter_wrapper = $("#meter_svg").svg('get');
        
        meter_wrapper.load("SVG/meter.svg",
          {
            onLoad: meter_onLoad
          }
        );
        
        $("#graph_svg").width(800).height(1200);
        $("#graph_svg").svg();
        var graph_wrapper = $("#graph_svg").svg('get');
        
        graph_wrapper.load("SVG/circle.svg",
          {
           onLoad: null
           }
        );
 
        $("#watts_svg").width(300).height(50);
        $("#watts_svg").svg();
        var watts_wrapper = $("#watts_svg").svg('get');
        
        watts_wrapper.load("SVG/meter_watts.svg",
          {
           }
        );
        $("#bill_svg").width(300).height(50);
        $("#bill_svg").svg();
        var bill_wrapper = $("#bill_svg").svg('get');
        
        bill_wrapper.load("SVG/meter_bill.svg",
          {
           }
        ); 
        
        $("#bill_slider_svg").width(650).height(150);
        $("#bill_slider_svg").svg();
        var slider_wrapper = $("#bill_slider_svg").svg('get');
        
        slider_wrapper.load("SVG/bill_slider.svg",
          {
           onLoad: slider_onLoad
           }
        ); 
  
        //if this is true, all animation stops
        var pause_flag = false;
  	var morning = "am";
	var count = 6;
        var move_graph = function(){ 
	count++;
          var lines = $("#graph_svg").children("svg").children("g#lines");
          var temp;
          
          if (pause_flag == false) {
            //update each line with next power
            lines.children().each( function() {
              if ($(this).attr("id") != "40"){
                $(this).attr("y1", lines.children("line#" + (parseInt($(this).attr("id"))+1)).attr("y1"));
              }
            
             } //end function
            ); //end each function on children
       
            lines.children("line#40").attr("y1", 500-(total_watts/1501*500) );
	
		var curr_time =   $("#graph_svg").children("svg").children("g#time");
	
if(count == 7) // move tiem only after 7 graph moves
	{
	count = 0;
	curr_time.children().each( function() {
              if ($(this).attr("id") != "6"){
                $(this).text(curr_time.children("#"+(parseInt($(this).attr("id"))+1)).text());
              }
	           
             } //end function
            ); //end each function on children

	if((parseInt(curr_time.children("#6").text())+1) < 13){
            curr_time.children("#6").text((parseInt(curr_time.children("#6").text())+1)+morning);  
	}
	else
	{
	if(morning == "am"){
		morning = "pm";}
	else if(morning == "pm"){
		morning = "am";}
	
	 curr_time.children("#6").text((parseInt(curr_time.children("#6").text())+1-12)+morning);  
	}
}
            setTimeout(move_graph, 1000);
          

          }
        }
          
        setTimeout( move_graph, 1000);
        
        var watts_value = 0
        var bill_value = 0
        
        var move_meter_text = function(){
        
          var total_kw = total_watts/1000;
          var kwh_svg = $("#watts_svg").children("svg").children("#power");
          var bill_svg = $("#bill_svg").children("svg").children("#bill");


          
          //this function is called every 50ms
          total_kw /=20;
          
          watts_value += total_kw;
          
          //need to take off numbers after 2digits
          var watts_text = watts_value.toString(10);
          watts_text = watts_text.substr(0,5);
          
          kwh_svg.text( watts_text + " KWh");
          
          
	  //change the text of the cost
	  var valuenow = parseInt($("#bill_slider_svg").attr("aria-valuenow"))/1000;



          bill_value += total_kw * valuenow;
          var bill_text = bill_value.toString(10);
          if (bill_value > 10 ){
            bill_text = bill_text.substr(0,5);
          } else {
            bill_text = bill_text.substr(0,4);
          }
          bill_svg.text( "Bill: $" + bill_text );
          
          if (pause_flag == false){
            setTimeout( move_meter_text, 50);          
          }
        
        }
        setTimeout( move_meter_text, 50);

   
        function onLoad(){
      
          //adjust to original angle for switch
          $("#switch2_svg").children("svg").children("g#switch1").attr("transform", "rotate(-35,65,100)");
          $("#switch3_svg").children("svg").children("g#switch1").attr("transform", "rotate(-35,65,100)");
          $("#switch4_svg").children("svg").children("g#switch1").attr("transform", "rotate(-35,65,100)");
 
       
          $("div.switch").keydown( function(event) {
          
            if ( event.keyCode == KEY_CODE.SPACE || event.keyCode == KEY_CODE.ENTER ) {

              //var for the switch
              var $switch_svg = $(this).children("svg").children("g#switch1");
              //var for the meter movement
              var $movement = $("div#meter_svg").children("svg").children("g#meter").children("g#meter_movement");
   
              if( $(this).attr("aria-checked") == "true"){

                //don't do anything if the angle is in doing rotation
                if (!( !($(this).attr("id") == "switch1_svg") || !( $(this).children("svg").children("g#switch1").attr("transform") != "rotate(" + switch1_angle + ", 65, 100)") )) {       

                  return;
                }
                if (!( !($(this).attr("id") == "switch2_svg") || !( $(this).children("svg").children("g#switch1").attr("transform") != "rotate(" + switch2_angle + ", 65, 100)") )) {
                  return;
                }
                if (!( !($(this).attr("id") == "switch3_svg") || !( $(this).children("svg").children("g#switch1").attr("transform") != "rotate(" + switch3_angle + ", 65, 100)") )) {
                  return;
                }
                if (!( !($(this).attr("id") == "switch4_svg") || !( $(this).children("svg").children("g#switch1").attr("transform") != "rotate(" + switch4_angle + ", 65, 100)") )) {
                  return;
                }
          
                $(this).attr("aria-checked", "false");
                //transform_string should be rotate(xx)
                var transform_string = $switch_svg.attr("transform");
                //take out the number of degrees
                transform_string = transform_string.substring(7,transform_string.length-1);
                $switch_svg.animate( {svgTransform: "rotate(" + (parseInt(transform_string)+30) +", 65, 100)"}, 1000);  
               
                //changes the values of the power
                if ( $(this).attr("id") == "switch1_svg"){
                  total_watts = 0;
		  switch1Toggle(false);
                }
                if ( $(this).attr("id") == "switch2_svg"){
                  if ( $("#switch1_svg").attr("aria-checked") == "true") {
                    total_watts -= switch2_watts;
		    switch2Toggle(false);
                  }
                }
                if ( $(this).attr("id") == "switch3_svg"){
                  if ( $("#switch1_svg").attr("aria-checked") == "true") {
                    total_watts -= switch3_watts;
		    switch3Toggle(false);
                  }
                }
                if ( $(this).attr("id") == "switch4_svg"){
                  if ( $("#switch1_svg").attr("aria-checked") == "true") {
                    total_watts -= switch4_watts;
		    switch4Toggle(false);
                  }
                }

		//update the current power font
                $("h2").text( current_power_text + total_watts + "watts");

		
                
              } else {

                //don't do anything if the angle is in between
                if (!( !($(this).attr("id") == "switch1_svg") || !( $(this).children("svg").children("g#switch1").attr("transform") != "rotate(" + (switch1_angle+30) + ", 65, 100)") )) {
                  return;
                }
                if (!( !($(this).attr("id") == "switch2_svg") || !( $(this).children("svg").children("g#switch1").attr("transform") != "rotate(" + (switch2_angle+30) + ", 65, 100)") )) {
                  return;
                }
                if (!( !($(this).attr("id") == "switch3_svg") || !( $(this).children("svg").children("g#switch1").attr("transform") != "rotate(" + (switch3_angle+30) + ", 65, 100)") )) {
                  return;
                }
                if (!( !($(this).attr("id") == "switch4_svg") || !( $(this).children("svg").children("g#switch1").attr("transform") != "rotate(" + (switch4_angle+30) + ", 65, 100)") )) {
                  return;
                }
              
              
                $(this).attr("aria-checked", "true");
                //transform_string should be rotate(xx)
                var transform_string = $switch_svg.attr("transform");
                //take out the number of degrees
                transform_string = transform_string.substring(7,transform_string.length-1);
                $switch_svg.animate( {svgTransform: "rotate(" + (parseInt(transform_string)-30) +", 65, 100)"}, 1000);  

                //changes the values of the power
                if ( $(this).attr("id") == "switch1_svg"){
		switch1Toggle(true);
                  if ( $("#switch2_svg").attr("aria-checked") == "true"){
                    total_watts += switch2_watts;
		    switch2Toggle(true);
                  }
                  if ( $("#switch3_svg").attr("aria-checked") == "true"){
                    total_watts += switch3_watts;
		    switch3Toggle(true);
                  }
                  if ( $("#switch4_svg").attr("aria-checked") == "true"){
                    total_watts += switch4_watts;
		    switch4Toggle(true);
                  }
                }
                if ( $(this).attr("id") == "switch2_svg"){
                  if ( $("#switch1_svg").attr("aria-checked") == "true") {
                    total_watts += switch2_watts;
		    switch2Toggle(true);
                  }
                }
                if ( $(this).attr("id") == "switch3_svg"){
                  if ( $("#switch1_svg").attr("aria-checked") == "true") {
                    total_watts += switch3_watts;
		    switch3Toggle(true);
                  }
                }
                if ( $(this).attr("id") == "switch4_svg"){
                  if ( $("#switch1_svg").attr("aria-checked") == "true") {
                    total_watts += switch4_watts;
		    switch4Toggle(true);
                  }
                }

		//update the current powre text
                $("h2").text( current_power_text + total_watts + "watts");


              } // end if  

              //after the total power changed, change the rate on meter
              if (pause_flag == false){
                change_meter_rate( $movement, calculate_rate(total_watts)); 
              }
            } //end if (check SPACE and ENTER)
          
            } //end function
          ); //end keydown function
        
          $("div.switch").click ( function(event) {

              //var for the switch
              var $switch_svg = $(this).children("svg").children("g#switch1");
              //var for the meter movement
              var $movement = $("div#meter_svg").children("svg").children("g#meter").children("g#meter_movement");
   
              if( $(this).attr("aria-checked") == "true"){

                //don't do anything if the angle is in between
                if (!( !($(this).attr("id") == "switch1_svg") || !( $(this).children("svg").children("g#switch1").attr("transform") != "rotate(" + switch1_angle + ", 65, 100)") )) {
                  return;
                }
                if (!( !($(this).attr("id") == "switch2_svg") || !( $(this).children("svg").children("g#switch1").attr("transform") != "rotate(" + switch2_angle + ", 65, 100)") )) {
                  return;
                }
                if (!( !($(this).attr("id") == "switch3_svg") || !( $(this).children("svg").children("g#switch1").attr("transform") != "rotate(" + switch3_angle + ", 65, 100)") )) {
                  return;
                }
                if (!( !($(this).attr("id") == "switch4_svg") || !( $(this).children("svg").children("g#switch1").attr("transform") != "rotate(" + switch4_angle + ", 65, 100)") )) {
                  return;
                }
          
                $(this).attr("aria-checked", "false");
                //transform_string should be rotate(xx)
                var transform_string = $switch_svg.attr("transform");
                //take out the number of degrees
                transform_string = transform_string.substring(7,transform_string.length-1);
                $switch_svg.animate( {svgTransform: "rotate(" + (parseInt(transform_string)+30) +", 65, 100)"}, 1000);  
               
                //changes the values of the power
                if ( $(this).attr("id") == "switch1_svg"){
                  total_watts = 0;
		  switch1Toggle(false);
                }
                if ( $(this).attr("id") == "switch2_svg"){
                  if ( $("#switch1_svg").attr("aria-checked") == "true") {
                    total_watts -= switch2_watts;
		    switch2Toggle(false);
                  }
                }
                if ( $(this).attr("id") == "switch3_svg"){
                  if ( $("#switch1_svg").attr("aria-checked") == "true") {
                    total_watts -= switch3_watts;
		    switch3Toggle(false);
                  }
                }
                if ( $(this).attr("id") == "switch4_svg"){
                  if ( $("#switch1_svg").attr("aria-checked") == "true") {
                    total_watts -= switch4_watts;
		    switch4Toggle(false);
                  }
                }

                $("h2").text( current_power_text + total_watts + "watts");

                
              } else {

                //don't do anything if the angle is in between
                if (!( !($(this).attr("id") == "switch1_svg") || !( $(this).children("svg").children("g#switch1").attr("transform") != "rotate(" + (switch1_angle+30) + ", 65, 100)") )) {
                  return;
                }
                if (!( !($(this).attr("id") == "switch2_svg") || !( $(this).children("svg").children("g#switch1").attr("transform") != "rotate(" + (switch2_angle+30) + ", 65, 100)") )) {
                  return;
                }
                if (!( !($(this).attr("id") == "switch3_svg") || !( $(this).children("svg").children("g#switch1").attr("transform") != "rotate(" + (switch3_angle+30) + ", 65, 100)") )) {
                  return;
                }
                if (!( !($(this).attr("id") == "switch4_svg") || !( $(this).children("svg").children("g#switch1").attr("transform") != "rotate(" + (switch4_angle+30) + ", 65, 100)") )) {
                  return;
                }
              
              
                $(this).attr("aria-checked", "true");
                //transform_string should be rotate(xx)
                var transform_string = $switch_svg.attr("transform");
                //take out the number of degrees
                transform_string = transform_string.substring(7,transform_string.length-1);
                $switch_svg.animate( {svgTransform: "rotate(" + (parseInt(transform_string)-30) +", 65, 100)"}, 1000);  

                //changes the values of the power
                if ( $(this).attr("id") == "switch1_svg"){
		switch1Toggle(true);
                  if ( $("#switch2_svg").attr("aria-checked") == "true"){
                    total_watts += switch2_watts;
		    switch2Toggle(true);
                  }
                  if ( $("#switch3_svg").attr("aria-checked") == "true"){
                    total_watts += switch3_watts;
		    switch3Toggle(true);
                  }
                  if ( $("#switch4_svg").attr("aria-checked") == "true"){
                    total_watts += switch4_watts;
		    switch4Toggle(true);
                  }
                }
                if ( $(this).attr("id") == "switch2_svg"){
                  if ( $("#switch1_svg").attr("aria-checked") == "true") {
                    total_watts += switch2_watts;
		    switch2Toggle(true);
                  }
                }
                if ( $(this).attr("id") == "switch3_svg"){
                  if ( $("#switch1_svg").attr("aria-checked") == "true") {
                    total_watts += switch3_watts;
		    switch3Toggle(true);
                  }
                }
                if ( $(this).attr("id") == "switch4_svg"){
                  if ( $("#switch1_svg").attr("aria-checked") == "true") {
                    total_watts += switch4_watts;
		    switch4Toggle(true);
                  }
               }

		//update the current power text	
               $("h2").text( current_power_text + total_watts + "watts");

              } // end if  

              //after the total power changed, change the rate on meter
              if (pause_flag == false){
                change_meter_rate( $movement, calculate_rate(total_watts)); 
              }     
              
            } //end function
          ); //end click function
        
        }
  
       function meter_onLoad(){
         //set the rate as starting rate
         change_meter_rate( $("div#meter_svg").children("svg").children("g#meter").children("g#meter_movement"), calculate_rate(total_watts)); 
         
        } //end meter_onLoad function


  
        function calculate_rate ( power){
          if (power == 0){
            return 0;
          }
          return (1/power)*300;
        }

        function change_meter_rate ( $movement, rate ) {

	  if ( rate == 0 ){

	    document.getElementById("meter_svg").getElementsByTagName("svg")[0].pauseAnimations();
	    return;

	  } //end if 

          document.getElementById("meter_svg").getElementsByTagName("svg")[0].unpauseAnimations();


        
          $movement.children().each( function() {
            var node = $(this);
            var animation = node.children();
            animation.attr("dur", rate + "s");
            
            //calculate the starting time
            var count = parseInt(animation.attr("count"));
            animation.attr("begin", rate/8*count + "s");
      
           } //end function
          ); //end each



        } //end change_meter_rate function
        
        
        function slider_onLoad(){
        
            $("div#bill_slider_svg").keydown( function(event) {

	      switch( event.keyCode ) {

		case KEY_CODE.DOWN:
		case KEY_CODE.LEFT:

		  change_slider_value (-1);

		  event.stopPropagation();
                  event.preventDefault();
		  return false;

		case KEY_CODE.UP:
	 	case KEY_CODE.RIGHT:

		  change_slider_value (1);

	          event.stopPropagation();
		  event.preventDefault();
		  return false;
	
	 	case KEY_CODE.PAGEUP:

		  change_slider_value (10);

	          event.stopPropagation();
		  event.preventDefault();
		  return false;
	
	 	case KEY_CODE.PAGEDOWN:
		  change_slider_value (-10);

		
	          event.stopPropagation();
		  event.preventDefault();
		  return false;
	
	 	case KEY_CODE.HOME:
		  change_slider_value (-100);

		
	          event.stopPropagation();
		  event.preventDefault();
		  return false;

	 	case KEY_CODE.END:
		  change_slider_value (100);

		
	          event.stopPropagation();
		  event.preventDefault();
		  return false;
		

	      } //end switch
                       
	      
            } //end function
            
     

            
          ); //end keydown function
        } //end slider_onLoad

	function change_slider_value( amount ){

          var $thumb = $("div#bill_slider_svg").children("svg").children("g").children("rect#thumb");

          //change aria-value
	  var aria_value = parseInt($("#bill_slider_svg").attr("aria-valuenow"));
	  var aria_min = parseInt($("#bill_slider_svg").attr("aria-valuemin"));
	  var aria_max = parseInt($("#bill_slider_svg").attr("aria-valuemax"));
		
	  aria_value += amount;
		
	  if ( 0 > amount && aria_min > aria_value){
	    aria_value = aria_min;
	  }

	  if ( amount > 0 && aria_value > aria_max){
	    aria_value = aria_max;
	  }

		
	  //update aria value		
	  $("#bill_slider_svg").attr("aria-valuenow", aria_value);

	  //update thumb position
          $thumb.attr("x", aria_value*5.1+20); 

	  //change the text of the cost
	  var aria_value = parseInt($("#bill_slider_svg").attr("aria-valuenow"));
          var valuenow_text = (aria_value/10).toString(10);
 
          //have correct number of digits
          if (aria_value >= 100){
            valuenow_text = valuenow_text.substr(0,4);
          } else{
            valuenow_text = valuenow_text.substr(0,3);
          }      
	      
          $("div#bill_cost_text").text( "Cost of electricity: " + valuenow_text + " cents per kWh");
              



        } //end function change_slider_value
     

	//function to move the slider with mouse
        $("#bill_slider_svg").bind( 'mousedown', function(event){
        
          current_slider_node = $(this);
          current_thumb_node = $(this).children("svg").children("g").children("rect#thumb");
          current_slider_offset = event.pageX - current_thumb_node.offset().left;
        
          $(document).bind( 'mouseup', function sliderMouseUp() {
            $(document).unbind( 'mouseup', sliderMouseUp);
            current_slider_node.unbind( 'mousemove');
            current_slider_node.focus();
            } //end function
          ); //end bind
          
          current_slider_node.bind('mousemove', function(event) {
          
            var position = event.pageX - current_slider_node.offset().left+20 - current_slider_offset;
            
            if (20 > position ) {
              position = 20;
            }
            
            var slider_width = 530;
            
            if ( position > slider_width) {
              position = slider_width;
            }
            
            var value_now = position;
                 
            current_thumb_node.attr("x", value_now);   
  
	    var aria_value = Math.round((current_thumb_node.attr("x")-20)/5.1);

       
	    var valuenow_text = (aria_value/10).toString(10);
 
            //have correct number of digits
            if (aria_value >= 100){
              valuenow_text = valuenow_text.substr(0,4);
            } else{
              valuenow_text = valuenow_text.substr(0,3);
            }      
            
            $("div#bill_cost_text").text( "Cost of electricity: " + valuenow_text + " cents per kWh");

	    $("#bill_slider_svg").attr("aria-valuenow", aria_value);
		              

  
            event.stopPropagation();
            event.preventDefault();
            return false;
 
            } //end function
          ); //end bind

          event.stopPropagation();
          event.preventDefault();
          return false;
         
          } //end function
        ); //end bind
        
        $("input#start_time_button").click( function(event) {
          if (pause_flag == true) {
            pause_flag = false;

            document.getElementById("meter_svg").getElementsByTagName("svg")[0].unpauseAnimations();

            //move the meter
            var $movement = $("div#meter_svg").children("svg").children("g#meter").children("g#meter_movement");
            change_meter_rate( $movement, calculate_rate(total_watts));
            
            //restart the timeout functions
            move_graph();
            move_meter_text();
            
	    // unpause arrows
	    unpauseArrows();
          } // end if 
        
          } //end function
        ); //end click

        $("input#pause_time_button").click( function(event) {
          
          if (pause_flag == false) {
            pause_flag = true;
            
	    //stop meter animation
	    document.getElementById("meter_svg").getElementsByTagName("svg")[0].pauseAnimations();

		  
	    // pause arrows
	    pauseArrows();



          } // end if 
         
         } // end function
        ); //end click        

        $("input#reset_time_button").click( function(event) {
         
          watts_value = 0;
          bill_value = 0;
             
          //if it is paused, value would not be updated so update
          var kwh_svg = $("#watts_svg").children("svg").children("#power");
          var bill_svg = $("#bill_svg").children("svg").children("#bill");
          
          kwh_svg.text( "0.0 kWh");
          bill_svg.text( "Bill: $0.00");
             
	  // reset arrows
	  resetArrows();
		
          //initialize each line of the graph
          var curr_time =   $("#graph_svg").children("svg").children("g#time");
          var lines = $("#graph_svg").children("svg").children("g#lines");
           
	 curr_time.children("time#4").text("1");
	//update each line with next power
          lines.children().each( function() {
            $(this).attr("y1", 0);
            } //end function
        //curr_time.children().each(function(){
         //-- $(this).text( "1" );
	//}	  
	); //end each function on children
         
         
          } // end function
        ); //end click



        
        } //end function
      ); //end ready
